<template>
	<view class="title">
		<view class="bar" :style="barStyle"></view>
		<view class="txt" :style="barColor">
			<view :class="mydata.params.icon + ' iconfont'" v-if="mydata.params.titleBarType == 0"
				style="margin-right:5rpx"></view>
			{{ mydata.params.title }}
		</view>
		<view class="bar" :style="barStyle"></view>
	</view>
</template>

<script>
	export default {
		name: "titleBar",
		data() {
			return {

			}
		},
		computed: {
			barStyle() {
				return "background:" + this.mydata.params.bar_color + ";";
			},
			barColor() {
				return "color:" + this.mydata.params.bar_color + ";";
			},
		},
		props: {
			mydata: {
				type: Object,
				default: null
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 20rpx;
		align-items: center;

		.txt {
			margin: 0 50rpx;
			font-size: 28rpx;
			color: #999;
			font-weight: bold;
			display: flex;
			align-items: center;
		}

		.bar {
			width: 60rpx;
			height: 4rpx;
			background: #999;
			display: block;
		}
	}
</style>
